<template >
    <div class="rights">
        <template>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
         <el-button type="success" plain style="margin-bottom:15px" @click="addRoles">添加角色</el-button>
         <template>
            <el-table
                border
                :data="rolesList"
                style="width: 100%">
                <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-row v-for='first in scope.row.children' :key='first.id' style="margin-bottom:5px">
                            <el-col :span="4">
                                <el-tag
                                closable
                                type= 'success'
                                @close="deleteRights(scope.row,first.id)">
                                {{first.authName}}
                                </el-tag>
                                <span class="el-icon-arrow-right" v-if='first.children.length !== 0'></span>
                            </el-col>
                            <el-col :span="20">
                                <el-row v-for='second in first.children' :key='second.id' style="margin-bottom:5px">
                                    <el-col :span="4">
                                        <el-tag
                                        closable
                                        type= 'info'
                                        @close="deleteRights(scope.row,second.id)">
                                        {{second.authName}}
                                        </el-tag>
                                        <span class="el-icon-arrow-right" v-if='first.children.length !== 0'></span>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-tag
                                        v-for='third in second.children' :key='third.id' style="margin-right:5px;margin-bottom:5px"
                                        closable
                                        type= 'warning'
                                        @close="deleteRights(scope.row,third.id)">
                                        {{third.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                    </el-row>
                </template>
                </el-table-column>
                <el-table-column
                type="index"
                >
                </el-table-column>
                <el-table-column
                label="角色名称"
                prop="roleName">
                </el-table-column>
                <el-table-column
                label="描述"
                prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" plain @click="editRoles(scope.row)">编辑</el-button>
                        <el-button type="primary" icon="el-icon-delete" plain @click="deleteRoles(scope.row)">删除</el-button>
                        <el-button type="primary" icon="el-icon-check" plain @click="showGrantDialog(scope.row)">角色授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-dialog title="权限分配" :visible.sync="rightsDialogFormVisible">
                    <div class="treeBox">
                        <el-tree
                        ref="tree"
                        :data="rightsList"
                        show-checkbox
                        node-key="id"
                        :default-expand-all='true'
                        :default-checked-keys="rights_roles"
                        :props="defaultProps">
                        </el-tree>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="rightsDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="changeRolesRights">确 定</el-button>
                    </div>
        </el-dialog>

        <!-- 添加用户 -->
        <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
            <el-form :model="addform" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addform.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRolesRights">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑用户 -->
            <el-dialog title="编辑" :visible.sync="editDialogFormVisible">
                    <el-form :model="editUserForm" :rules='rules' label-width="100px" ref='editUserForm'>
                            <el-form-item label="角色名称" prop="email">
                                <el-input v-model="editUserForm.roleName"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" prop="mobile">
                                <el-input v-model="editUserForm.roleDesc"></el-input>
                            </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="editDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
                    </div>
            </el-dialog>

            <!-- 删除用户 -->
            <el-dialog
            title="删除提示"
            :visible.sync="delDialogVisible"
            width="30%"
            :before-close="handleClose">
                <span>确定要删除角色名是"{{delUserForm.roleName}}"的这条数据吗?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="delUserSubmit(delUserForm.id)">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
import {getRightsList, getRolesList, rightsChange, deleterolesrights, addrolesderights, editAddRoles, delroles} from '@/api/login.js'
export default {
  data () {
    return {
      rolesList: [],
      rightsList: [],
      rights_roles: [],
      rightsDialogFormVisible: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      delDialogVisible: false,
      currentRoleId: '',
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      rules: {
        roleName: [
          { required: true, message: '请输入正确的角色名称', trigger: 'blur' }
        ],
        roleDesc: [{ required: true, message: '请输入正确的角色描述', trigger: 'blur' }]
      },
      addform: {
        roleName: '',
        roleDesc: ''
      },
      editUserForm: {
        roleName: '',
        roleDesc: '',
        id: ''
      },
      delUserForm: {
        id: '',
        roleName: ''
      }

    }
  },
  methods: {
    showGrantDialog (row) {
      console.log(row)
      this.rightsDialogFormVisible = true
      this.currentRoleId = row.id
      getRightsList({type: 'tree'})
        .then((res) => {
        //   console.log(res)
          this.rightsList = res.data
        })
      this.rights_roles.length = 0
      row.children.forEach((first, index) => {
        if (first.children && first.children.length !== 0) {
          first.children.forEach((second) => {
            if (second.children && second.children.length !== 0) {
              second.children.forEach((third) => {
                this.rights_roles.push(third.id)
              })
            }
          })
        }
      })
    },
    changeRolesRights () {
      // 获取当前被选中的所有节点
      var selectednodes = this.$refs.tree.getCheckedNodes()
      console.log(selectednodes)
      // 2.遍历数组，获取我们需要的每一个对象中的id和pid
      var originArr = selectednodes.map((item) => {
        return item.id + ',' + item.pid // 105,104,101
      })
      console.log(originArr) // ['105,104,101','116,104,101']
      //   3.将获取到的数据拼接为一个整体字符中 -- 有重复值
      var originStr = originArr.join(',')
      console.log(originStr)
      //   4.使用new Set去除重复值  得到的结果是个对象
      var myset = new Set(originStr.split(','))
      console.log(myset)
      //   5.使用Array.from从set对象返回数组
      var finalArr = Array.from(myset)
      console.log(finalArr)
      // 发送请求
      rightsChange(this.currentRoleId, {rids: finalArr.join(',')})
        .then(res => {
          if (res.meta.status === 200) {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.rightsDialogFormVisible = false
            this.initList()
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    },
    initList () {
      getRolesList()
        .then((res) => {
          this.rolesList = res.data
        })
    },
    deleteRights (row, rightId) {
      deleterolesrights(row.id, rightId)
        .then(res => {
          if (res.meta.status === 200) {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            row.children = res.data
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    },
    addRoles () {
      this.addDialogFormVisible = true
    },
    addRolesRights () {
      addrolesderights(this.addform)
        .then(res => {
          if (res.meta.status === 201) {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.addDialogFormVisible = false
            this.initList()
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    },
    editRoles (row) {
      this.editDialogFormVisible = true
      this.editUserForm.roleName = row.roleName
      this.editUserForm.roleDesc = row.roleDesc
      this.editUserForm.id = row.id
    },
    editUserSubmit () {
      editAddRoles(this.editUserForm)
        .then(res => {
          if (res.meta.status === 200) {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.editDialogFormVisible = false
            this.initList()
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    },
    deleteRoles (row) {
      this.delDialogVisible = true
      this.delUserForm.roleName = row.roleName
      this.delUserForm.id = row.id
    },
    delUserSubmit () {
      delroles(this.delUserForm.id)
        .then(res => {
          if (res.meta.status === 200) {
            console.log(res)
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.delDialogVisible = false
            this.initList()
          } else {
            this.$message({
              type: 'warning',
              message: res.meta.msg
            })
          }
        })
    }

  },
  mounted () {
    this.initList()
  }

}
</script>

<style lang="scss" scoped>
.treeBox{
    height: 400px;
    overflow: auto
}
</style>
